import React, { Component } from 'react';
import {
  View,
  Text,
  ScrollView,
  StyleSheet,
  Image,
} from 'react-native';

import {
  Navbar,
  HText,
  PopItem,
  PopOver,
  Button,
  Divider,
} from '../../DodLibrary/index';

class PopOverPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      left1: 0,
      top1: 0,

      left2: 0,
      top2: 0,
    };
  }

  _handleButton1Click = ({ nativeEvent: { pageX, pageY, locationX, locationY } }) => {
    this.setState({
      left1: pageX - locationX,
      top1: pageY - locationY,
    }, () => this._PopOver1.open());
  };

  _handleButton2Click = ({ nativeEvent: { pageX, pageY, locationX, locationY } }) => {
    this.setState({
      left2: pageX - locationX,
      top2: pageY - locationY,
    }, () => this._PopOver2.open());
  };

  render() {
    const {
      navigation,
    } = this.props;
    const {
      left1,
      top1,
      left2,
      top2,
    } = this.state;
    return (
      <View
        style={styles.container}>
        <PopOver
          wrapperStyle={{
            borderRadius: 0,
            backgroundColor: 'transparent',
          }}
          wrapperWidth={300}
          left={left2}
          top={top2}
          height={250}
          ref={ref => { this._PopOver2 = ref; }}>
          <View
            style={{
              flex: 1,
              padding: 20,
            }}>

            <View
              style={{
                flex: 1,
                backgroundColor: '#fff',
                padding: 5,
              }}>
              <View
                style={{
                  borderLeftWidth: 5,
                  borderLeftColor: '#108eeb',
                  paddingLeft: 16,
                  paddingVertical: 3,
                  flexDirection: 'row',
                }}>

                <Text
                  style={{
                    fontSize: 16,
                  }}>
                  Inuyasha
                </Text>
              </View>

              <View
                style={{
                  flex: 1,
                  padding: 16,
                }}>
                <Text>
                  Are you OK,I am Lei Hou, Jack Ma
                </Text>
              </View>

              <View
                style={{
                  flexDirection: 'row',
                  justifyContent: 'flex-end',
                  alignItems: 'center',
                  marginTop: 30,
                }}>
                <Button.Ripple
                  radius={0}
                  color="#d22222"
                  wrapperStyle={{
                    paddingVertical: 5,
                    paddingHorizontal: 12,
                  }}>
                  No
                </Button.Ripple>
                <Button.Ripple
                  radius={0}
                  wrapperStyle={{
                    marginLeft: 16,
                    paddingVertical: 5,
                    paddingHorizontal: 12,
                  }}>
                  Ok
                </Button.Ripple>
              </View>
            </View>
            <Image
              source={{
                uri: 'http://qiniu.enjoymemory.cn//image/background2.png',
              }}
              style={{
                width: 40,
                height: 40,
                borderRadius: 20,
                position: 'absolute',
                top: 0,
                right: 40,
                overflow: 'visible',
              }}
            />
          </View>
        </PopOver>

        <PopOver
          wrapperWidth={200}
          left={left1}
          top={top1}
          ref={ref => { this._PopOver1 = ref; }}>
          <PopItem
            key={1}
            text="Inuyasha1"
            icon={{
              name: 'delete',
            }}
          />
          <PopItem
            key={2}
            text="Inuyasha2"
            icon={{
              name: 'delete',
            }}
          />
          <PopItem
            key={3}
            text="Inuyasha3"
            icon={{
              name: 'delete',
            }}
          />
          <PopItem
            key={4}
            text="Inuyasha4"
            icon={{
              name: 'delete',
            }}
          />
          <PopItem
            key={5}
            text="Inuyasha5"
            icon={{
              name: 'delete',
            }}
            border={0}
          />
        </PopOver>
        <Navbar
          title="PopOver"
          leftIcon={{
            name: 'apps',
          }}
          leftOnPress={() => navigation.navigate('DrawerOpen')}
        />
        <ScrollView
          contentContainerStyle={{
            alignItems: 'center',
          }}>
          <Divider />
          <Divider />
          <Divider />
          <Button.Opacity onPress={this._handleButton1Click}>
            popitems
          </Button.Opacity>

          <Divider />
          <Divider />
          <Divider />
          <Button.Opacity onPress={this._handleButton2Click}>
            customize
          </Button.Opacity>



        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default PopOverPage;
